<template>
    <view class="m-image-link">
        <image :src="imageUrl" class="m-image-link-img" mode="scaleToFill" :style="{ height: height }" />
        <uni-icons
            type="close"
            size="30"
            v-if="availableClose"
            class="m-image-link-icons"
            @click="close"
            color="#f8f8f8"
        ></uni-icons>
    </view>
</template>

<script lang="ts" setup>
const props = defineProps({
    imageUrl: { type: String },
    pageUrl: { type: String },
    availableClose: { type: Boolean, default: false },
    height: { type: String, default: 'auto' }
})
const emit = defineEmits(['close'])
const goto = function () {}
function close() {
    emit('close')
}
</script>

<style lang="scss" scoped>
.m-image-link-img {
    width: 100%;
}
.m-image-link {
    position: relative;
    line-height: 0rpx;
}
.m-image-link-icons {
    position: absolute;
    right: 0;
    line-height: v-bind(height);
}
</style>
